<template>
  <div class='detailManage-table'>
    <el-table
      :data='tableDatas'
    > 

      <el-table-column type='index' label='序号' width='90'  />
      <el-table-column
       :key='i'
        v-for='(k,i) in tableCol' 
       :label='k.label'
       :prop="k.value"
       :formatter='formatter'
       />

      <el-table-column label='操作' width='210'>
        <template scope='scope'>
          <span class="opt-btn-sp"> 
            <a @click.stop='handleEdit(scope.row.id)'><i class="fa fa-edit"></i>角色详情管理</a>
            <a @click.stop='handleDel(scope.$index)'><i class="fa fa-remove"></i>删除</a>
          </span>   
        </template>
      </el-table-column>

    </el-table>



    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        :page-sizes="[10, 40, 100, 200,400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
       />
     </div>


     <edit-dialog :dialogVisible.sync='dialogVisible' :id ='rowId'/>


  </div>
</template>

<script>
import EditDialog from './editDialog'
import Bus from './bus'
import Vue from 'vue'
import { MessageBox, Message, Pagination } from 'element-ui'
Vue.use(Pagination)
export default {
  components: {
    EditDialog
  },
  data () {
    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      tableCol: [
        {
          label: '角色名称',
          value: 'name'
        }, {
          label: '公司名称',
          value: 'setName'
        }, {
          label: '部门',
          value: 'deptName'
        }, {
          label: '人员类型',
          value: 'personType'
        }, {
          label: '备注',
          value: 'remark'
        }
      ],
      searchVal: {},
      tableDatas: [],
      rowId: '',
      refresh: 0
    }
  },

  computed: {
    id () {
      return this.$route.query.id || ''
    }
  },

  watch: {
    refresh (newValue, oldValue) {
      newValue && (this.getTableData())
    }
  },

  methods: {

    handleEdit (id) {
      this.rowId = id
      this.dialogVisible = true
    },
    handleDel (i) {
      MessageBox.confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const params = {
          id: this.tableDatas[i].id
        }

        this.Axios
          .Post('/wfConfAssigneeHolder/deleteAssigneeHolder', params)
          .then((res) => {

            if (res.data.status == 1) {
              Message({
                type: 'success',
                message: res.data.message
              })
              this.tableDatas.splice(i, 1)
            }

          })

      }).catch(() => { })

    },

    formatter (row, column, cellValue) {

      if (column.property == 'personType') {
        if (cellValue == 1) {
          return '内地'
        } else if (cellValue == 2) {
          return '内派'
        } else {
          return '香港'
        }
      }
      return cellValue
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    transFromDeptId (data) {

      if (!data) return false
      const start = data.lastIndexOf('(') + 1, end = data.length - 1
      return data.substring(start, end)

    },
    getTableData () {
      const params = {
        name: this.searchVal.name || '',
        deptId: this.transFromDeptId(this.searchVal.deptid) || '',
        setId: this.searchVal.setid || '',
        commonRoleId: this.id || '',
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      this.Axios
        .Post('/wfConfAssigneeHolder/getAssigneeHolder', params)
        .then((res) => {
          this.tableDatas = res.data.datas
          this.page.total = res.data.total
        })
    },
  },

  mounted () {
    Bus.$on('refresh', (data) => this.refresh = data)
    Bus.$on('searchVal', (data) => { this.searchVal = data })

    this.getTableData()
  },
}
</script>

<style scoped>
.detailManage-table {
  padding: 0 20px 50px 20px;
}
.fenye {
  margin: 20px 0 0 -5px;
}

.fenye {
  margin: 20px 0 0 -5px;
}

.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin: 5px 0;
  cursor: pointer;
}

.opt-btn-sp > a:last-of-type {
  background-color: #ec4758;
  border-color: #ec4758;
}
</style>

<style>
.detailManage-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.detailManage-table .fenye .el-pagination__total {
  padding-top: 3px;
}
</style>
